/* pages/play-list/detail.wxss */
@import '../../style/variables.scss';

.page {
    position: relative;

    .header-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 750rpx;
        height: 470rpx;
        background-color: $image-background-color;
        border-radius: 0 0 80rpx 80rpx;
        z-index: -1;
    }

    .header {
        width: 100vw;
        display: flex;
        flex-direction: row;
        padding-top: 120rpx;
        // padding-left: 75rpx;
        // align-items: center;
        justify-content: center;

        .musicImage {
            width: 320rpx;
            height: 320rpx;
            border-radius: 34rpx;
        }

        .rightItem {
            display: flex;
            flex-direction: column;
            margin-left: 42rpx;
            margin-top: 80rpx;

            .name {
                color: #8ba6bf;
                font-size: 40rpx;
                line-height: 45rpx;
                margin-bottom: 28rpx;
                padding-left: 12rpx;
            }

            .description {
                color: $text-color;
                // height: 84rpx;
                width: 250rpx;
                font-size: 24rpx;
                // line-height: 30rpx;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                text-align: center;
            }
        }
    }

    .action-area{
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 44rpx;
        t-button{
            margin-right: 20rpx;
        }
    }

    .music-list{
        margin-top: 60rpx;
    }

}